<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.max {
  color: red
}

.min {
  color: #bac9d2
}
</style>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<script type="text/javascript">
	var cataValue = '${param.cataId}';
	var dateValue = '${param.statDate}';
	
	$(document).ready(function() {
		restoreContent();
		findMaxMin();
		window.parent.setIframeHeight(window.parent.document
				.getElementById('content'));
	});
	
	function restoreContent() {
		if(dateValue != '') {
			$('#Date').val(dateValue);
		}
		
		if(cataValue != '') {
			$('#cataId').val(cataValue);
		}
	}
	
	function search(form) {
		$(form).appendPagerParaStr();
		return true;
	}

	function changeDateFomat() {

		var type = $("input[name='form-field-radio']:checked").val();
		var date;

		if (type == '0') {
			date = $('#hidden_day').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},c:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'})");
		} else if (type == '1') {
			date = $('#hidden_month').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M-{%d-1}'})");
		} else {
			date = $('#hidden_year').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y-%M-{%d-1}'})");
		}

		$('#Date').val(date);
	}
	/**
	 * 选择数据分类
	 */
	function changeDatacatagory() {
		
	}
	
	//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格  
	//参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data   
	//参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。  
	function _w_table_rowspan(_w_table_id,_w_table_colnum){
	    _w_table_firsttd = "";  
	    _w_table_currenttd = "";  
	    _w_table_SpanNum = 0;  
	    _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");  
	    _w_table_Obj.each(function(i){  
	        if(i==0){  
	            _w_table_firsttd = $(this);  
	            _w_table_SpanNum = 1;  
	        }else{  
	            _w_table_currenttd = $(this);  
	            if(_w_table_firsttd.text()==_w_table_currenttd.text()){  
	                _w_table_SpanNum++;  
	                _w_table_currenttd.hide(); //remove();  
	                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
	                _w_table_firsttd.attr("style","text-align:center;vertical-align:middle;");
	            }else{  
	                _w_table_firsttd = $(this);  
	                _w_table_SpanNum = 1;  
	            }
	        }  
	    });   
	}
	//只可第二列调用
	function _w_table_rowspan2(_w_table_id,_w_table_colnum){  
	    _w_table_firsttd = "";  
	    _w_table_firsttd2 = "";
	    _w_table_currenttd = "";  
	    _w_table_SpanNum = 0;
	    _w_table_SpanNum2 = 0;
	    _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")"); 
	    _w_table_Obj2 = $(_w_table_id + " tr td:nth-child(1)");
	    _w_table_Obj.each(function(i){  
	        if(i==0){  
	            _w_table_firsttd = $(this); 
	            _w_table_firsttd2 = _w_table_Obj2.eq(i);
	            _w_table_SpanNum = 1;
	            _w_table_SpanNum2 = 1;
	        }else{  
	            _w_table_currenttd = $(this);  
	            if(_w_table_firsttd.text()==_w_table_currenttd.text()){  
	                _w_table_SpanNum++;  
	                _w_table_currenttd.hide(); //remove();  
	                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
	                _w_table_firsttd.attr("style","text-align:center;vertical-align:middle;");
	                
	                _w_table_Obj2.eq(i).hide();
	                _w_table_firsttd2.attr("rowSpan",_w_table_SpanNum);
	                _w_table_firsttd2.attr("style","text-align:center;vertical-align:middle;");
	                
	            }else{  
	            	_w_table_SpanNum2++;
	            	_w_table_Obj2.eq(i).text(_w_table_SpanNum2);  
	                _w_table_firsttd = $(this); 
	                _w_table_firsttd2 = _w_table_Obj2.eq(i);
	                _w_table_SpanNum = 1;  
	            }  
	        }  
	    });   
	}
	
	function findMaxMin() {
		var values1 = $('table td.value1').map(function(index, td) {
		    return $(td).text();
		}).get();
		
		var values2 = $('table td.value2').map(function(index, td) {
		    return $(td).text();
		}).get();
		
		var max1 = Math.max.apply(null, values1);
	    var min1 = Math.min.apply(null, values1);
		$('table td.value1').each(function(i, td) {
			$(td).toggleClass('max', +$(td).text() === max1);
		    $(td).toggleClass('min', +$(td).text() === 0);
		});
		
		var max2 = Math.max.apply(null, values2);
	    var min2 = Math.min.apply(null, values2);
	    $('table td.value2').each(function(i, td) {
			$(td).toggleClass('max', +$(td).text() === max2);
		    $(td).toggleClass('min', +$(td).text() === 0);
		});
	}



</script>

</head>
<style type="text/css">
th {
	word-break: keep-all;
	white-space: nowrap;
}
</style>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li class="active">综合统计</li>
						<li class="active">数据同步统计</li>
					</ul>
				</div>

				<div class="page-content">
					<div class="tabbable">
						<ul class="nav nav-tabs" id="myTab">
							<li ><a href="${ctx}/stat/node_syn_stat.do">
									数据同步统计 </a></li>

							<li class="active"><a href="#"> 表格查看 </a></li>

						</ul>
					</div>


					<div class="tab-content">

						<div class="widget-box ">
						<form id="searchForm" class="form-search"
								action="${ctx}/stat/nodeSyncStat_list.do" method="post"
								onsubmit="return search(this)">
							<div class="widget-header widget-header-flat">

								<span> 选择数据分类: </span> <select id="cataId" name="cataId" style="width: 152px;">
									<option value="all" selected="selected">全部</option>
									<c:forEach var="cata" items="${catas}" varStatus="stc">
										<option  value="${cata.id}">${cata.name}</option>
									</c:forEach>
								</select> <span>选择时间 :</span>

								<%
											Calendar cal = Calendar.getInstance();
											cal.add(Calendar.DATE, -1);
											String date = new SimpleDateFormat("yyyy-MM-dd").format(cal
													.getTime());
											String month = new SimpleDateFormat("yyyy-MM")
													.format(cal.getTime());
											String year = new SimpleDateFormat("yyyy").format(cal.getTime());
										%>

								<input type="hidden" name="day" id="hidden_day"
									value="<%=date%>"> <input type="hidden" name="month"
									id="hidden_month" value="<%=month%>"> <input
									type="hidden" name="year" id="hidden_year" value="<%=year%>">



								<span class="input-icon input-icon-right"> <input
									type="text" class="form-control form-input" id="Date"
									name="statDate" value="<%=date%> "
									onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'});" />
									<i class="icon-calendar blue pointer"
									onclick="javascript:$('#Date').focus();"></i>
								</span>

								<div class="widget-toolbar no-border">
									<button class="btn btn-xs btn-primary">
										统计</button>
									&nbsp;&nbsp;&nbsp;
								</div>


							</div>
							</form>
						</div>

						<div class="hr hr12 hr-dotted"></div>


						<div id="table_span" class="table-responsive">
							<table id="sample-table-1"
								class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th class="center">序号</th>
										<th class="center">节点名称</th>
										<th class="center">发送/接收</th>
										<th class="center">数据分类</th>
										<th class="center">同步频次(次)</th>
										<th class="center">数据量(条)</th>
										<th class="center">统计时间</th>
										<!-- <th class="center">更新时间</th> -->

									</tr>
								</thead>

								<tbody>
									<c:forEach var="vo" items="${_data}" varStatus="varStatus">
										<tr>
											<td align="center">${varStatus.index + 1}</td>
											<td align="center">${vo.nodeName}</td>
											<td align="center" valign="middle">${vo.exchType eq "1" ? "接收" : "发送"}</td>
											<td align="center">${vo.datacatagoryName}&nbsp;</td>
											<td align="center" class="value1">${vo.total}</td>
											<td align="center" class="value2">${vo.dataSize}</td>
											<td align="center"><fmt:formatDate
													value="${vo.statDate}" pattern="yyyy-MM-dd HH:mm:ss" />&nbsp;</td>
											<%-- <td align="center"><fmt:formatDate value="${vo.mtime}" pattern="yyyy-MM-dd HH:mm:ss" />&nbsp;</td> --%>

										</tr>
									</c:forEach>
								</tbody>
							</table>
							<jsp:include page="/WEB-INF/view/common/pg.jsp">
								<jsp:param value="${ctx}/stat/nodeSyncStat_list.do" name="url" />
								<jsp:param value="${_total}" name="total" />
								<jsp:param value="${_urlpara}" name="urlpara" />
							</jsp:include>
						</div>



					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			_w_table_rowspan2("#sample-table-1",2);
			_w_table_rowspan("#sample-table-1",3);
			//document.getElementById("table_span").style.display="";
		});
	</script>
</body>
</html>
